<template>
  <!-- 薪酬区间分布 -->
  <div>
    <!-- <span class="tinyTitle">
      <div class="titleFlag"></div>
      {{ "薪酬区间详情" }}
    </span> -->
    <!-- <el-row class="search-container">
        <el-form ref="form" label-width="auto">
          <el-form-item label="统计时间：">
            <el-date-picker v-model="selectBetweenTime" size="small" type="monthrange" align="right" unlink-panels
              value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份"
              :picker-options="pickerOptions" @change="handleDateChange">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="区域名称：">
            <multipleRegoinSearch :limit-num="1" ref="regionRef" @onRegionChange="onRegionChange" />
          </el-form-item>
        </el-form>
      </el-row> -->
    <div class="chartMain">
      <template v-if="chartDataIsNotEmpty">
        <div class="h100" ref="line_echartDom"></div>
        <div class="regionLineResult" v-if="dataArr && dataArr.length > 0">
          <div
            class="rangeDesItem"
            v-for="(item, index) in dataArr"
            :key="index"
          >
            <div class="rangeIcon"></div>
            <div class="rangeValue">{{ item.value + '%' }}</div>
            <div class="rangeKey">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="regionLineDesc" v-if="dataArr && dataArr.length > 0">
          <div class="regionLineDescItem">
            <div class="descTitle">
              {{ chartTitle1 }}
            </div>
            <div class="descNum">
              <span class="rmb" v-if="chartData.maxRateRange">￥</span>
              <span v-if="chartData.maxRateRange">{{
                chartData.maxRateRange || ''
              }}</span>
              <span class="rate" v-if="chartData.maxRate">{{
                chartData.maxRate + '%'
              }}</span>
            </div>
            <div class="descTitle">
              {{ chartTitle2 }}
            </div>
            <div class="descNum">
              <span class="rmb" v-if="chartData.salaryNum">￥</span
              >{{ chartData.salaryNum }}/<span class="rmb">月</span>
            </div>
          </div>
        </div>
      </template>
      <el-empty class="empty" description="暂无数据" v-else
        ><el-button type="primary" size="mini" @click="handleKnowClick()">
          想要了解
        </el-button></el-empty
      >
    </div>
  </div>
</template>

<script>
import { getSalarySection, reportLackDataPosition } from '@/api/salary';
import multipleRegoinSearch from '@/views/position/components/multipleRegoinSearch.vue';
export default {
  name: 'workLineChart',
  components: {
    multipleRegoinSearch
  },
  data() {
    return {
      resData: [],
      chartDataIsNotEmpty: true, //必须让图表先显示，不然会出现空白
      dataArr: [],
      chartData: {},
      chartTitle1: this.$route.query.name + '人数占比最多的薪酬区间',
      chartTitle2: '全国' + this.$route.query.name + '平均薪酬约'
    };
  },
  created() {},
  mounted() {
    this.fetchData();
  },
  methods: {
    getWorkYearClass(index) {
      const obj = {
        0: 'pink',
        1: 'green',
        2: 'blue',
        3: 'skyBlue',
        4: 'brown'
      };
      return obj[index];
    },
    fetchData() {
      this.listLoading = true;
      const params = {
        id: this.$route.query.id
      };
      getSalarySection(params)
        .then((response) => {
          if (response.code == 200) {
            this.chartData = response.data;
            this.dataArr = this.handleData(response.data.list);
            this.chartDataIsNotEmpty =
              response.data.list && response.data.list.length > 0;
            setTimeout(() => {
              this.init();
            }, 500);
          } else {
            this.chartDataIsNotEmpty = false;
          }
        })
        .catch(() => {
          this.chartDataIsNotEmpty = false;
        });
    },
    handleData(data) {
      let dataArr = [];
      // //console.log("chartData----前--->", data);
      data.forEach((item) => {
        let dataItem = {
          value: '',
          name: ''
        };
        dataItem.value = item.rankRate;
        dataItem.name = item.salaryRank;
        dataArr.push(dataItem);
      });
      // //console.log("chartData---后---->", dataArr);
      return dataArr;
    },
    init() {
      if (!this.$refs['line_echartDom']) return;
      this.myChart = this.$echarts.init(this.$refs['line_echartDom']);
      let option = {
        color: [
          '#6115FF',
          '#9544FF',
          '#AF73FF',
          '#CAA1FF',
          '#DAC0FE',
          '#80A8FF',
          '#9FBAF4',
          '#AFCDFF',
          '#79CCB7',
          '#A5DCD4'
        ],
        series: [
          {
            type: 'pie',
            label: {
              show: false,
              position: 'center',
              // 高亮样式。
              emphasis: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold',
                fontFamily: 'D-DIN-PRO-600-SemiBold'
              },
              formatter: function (params) {
                return (
                  '{a|' + params.value + '%}' + '\n' + '{b|' + params.name + '}'
                );
              },
              rich: {
                a: {
                  color: '#333',
                  fontWeight: 'bold',
                  fontSize: 24,
                  height: 40,
                  backgroundColor: 'white',
                  fontFamily: 'D-DIN-PRO-600-SemiBold'
                },
                b: {
                  color: '#888',
                  fontSize: 14,
                  backgroundColor: 'white'
                }
              }
            },
            labelLine: {
              show: false
            },

            // 高亮样式。
            itemStyle: {
              borderWidth: 0,
              borderColor: '#6638FF',
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: '#6638FF', //6638FF
              emphasis: {
                borderWidth: 1.5,
                borderColor: 'rgb(255,255,255,0.8)',
                shadowBlur: 8,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgb(102,56,255,0.6)' //6638FF
              }
            },
            data: this.dataArr,
            radius: ['45%', '70%']
          }
        ]
      };
      this.myChart.clear();
      option && this.myChart.setOption(option);

      // let maxIndex = 0;
      // let maxValue = -Infinity;

      // for (let i = 0; i < this.dataArr.length; i++) {
      //   if (this.dataArr[i].value > maxValue) {
      //     maxValue = this.dataArr[i].value;
      //     maxIndex = i;
      //   }
      // }

      // console.log(
      //   "myChart------xxxxxxxxx--->",
      //   this.dataArr,
      //   maxIndex,
      //   maxValue
      // );
      getDefaultSelected(this.myChart);
      function getDefaultSelected(myChart) {
        // //console.log("myChart------xxxxxxxxx--->", maxIndex);
        let index = 0;

        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 0
        });
        myChart.on('mouseover', (e) => {
          if (e.dataIndex !== index) {
            myChart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: index
            });
          }
        });
        myChart.on('mouseout', (e) => {
          index = e.dataIndex;
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: e.dataIndex
          });
        });
      }
      window.addEventListener('resize', () => {
        if (this.myChart) {
          this.myChart.resize();
        }
      });
      this.myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 1
      });
    },

    onWorkYearChange(val) {
      this.fetchData();
    },
    handleDateChange(val) {
      if (this.isSetDeaultTime) {
        this.isSetDeaultTime = false;
        return;
      }
      this.pickerMinDate = null;
      this.fetchData();
    },
    onRegionChange(val) {
      this.selectedRegionList = val;
      if (this.isSetDeaultRegion) {
        this.isSetDeaultRegion = false;
        return;
      }
      this.fetchData();
    },
    handleKnowClick() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo')); //OA的userInfo和SaaS登录的userInfo不一样
      const oaId = '';
      if (userInfo && userInfo.user_source_id) {
        oaId = userInfo.user_source_id;
      }
      const params = {
        positionId: this.$route.query.id,
        positionName: this.$route.query.name,
        layerId: '86',
        layerName: '薪酬区间分布',
        personId: localStorage.getItem('personId') || '',
        oaId: oaId
      };
      reportLackDataPosition(params).then((response) => {
        if (response.code == 200) {
          this.$message.success('已成功提交');
        } else {
          this.$message.error(res.status_desc);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.pink {
  font-weight: bold;
}
.green {
  font-weight: bold;
}
.blue {
  font-weight: bold;
}
.skyBlue {
  font-weight: bold;
}
.brown {
  font-weight: bold;
}
.tinyTitle {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-top: 16px;
  color: #222;
  font-weight: bold;
  margin-bottom: 22px;
  .titleFlag {
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: #4880ff;
    margin-right: 12px;
  }
}
.chartMain {
  display: flex;
  align-items: center;
  // justify-content: space-around;
  .empty {
    margin: auto;
    ::v-deep .el-empty__image {
      width: 150px;
    }
  }
}
.regionLineChart {
  display: flex;
  align-items: center;
}
.regionLineResult {
  display: flex;
  flex-wrap: wrap;
  max-width: 400px;
  margin-left: 20px;
  /* justify-content: left; */
  justify-content: flex-start;
  // height: 150px;
  background-color: #f3f7ff;
  border-radius: 8px;
  padding: 10px;
  .rangeDesItem {
    display: flex;
    flex-wrap: wrap;
    width: 170px;
    justify-content: flex-start;
    align-items: center;
    margin: 15px 10px;
    // height: 40px;
    .rangeIcon {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      margin-right: 10px;
      // background-color: #0b6eff;
    }
    .rangeKey {
      width: 60px;
      // height: 40px;
      color: #555;
      font-size: 15px;
      // font-weight: bold;
    }
    .rangeValue {
      // display: block;
      width: 60px;
      font-size: 16px;
      // height: 40px;
      color: #555;
      font-weight: bold;
      margin-right: 10px;
      font-family: D-DIN-PRO-600-SemiBold;
    }
  }
  .rangeDesItem:nth-child(1) {
    .rangeIcon {
      background: #6115ff;
    }
  }
  .rangeDesItem:nth-child(2) {
    .rangeIcon {
      background: #9544ff;
    }
  }
  .rangeDesItem:nth-child(3) {
    .rangeIcon {
      background: #af73ff;
    }
  }
  .rangeDesItem:nth-child(4) {
    .rangeIcon {
      background: #caa1ff;
    }
  }
  .rangeDesItem:nth-child(5) {
    .rangeIcon {
      background: #dac0fe;
    }
  }
  .rangeDesItem:nth-child(6) {
    .rangeIcon {
      background: #80a8ff;
    }
  }
  .rangeDesItem:nth-child(7) {
    .rangeIcon {
      background: #9fbaf4;
    }
  }
  .rangeDesItem:nth-child(8) {
    .rangeIcon {
      background: #9fbaf4;
    }
  }
  .rangeDesItem:nth-child(9) {
    .rangeIcon {
      background: #79ccb7;
    }
  }
  .rangeDesItem:nth-child(10) {
    .rangeIcon {
      background: #a5dcd4;
    }
  }
}
.regionLineDesc {
  margin-left: 60px;
  .regionLineDescItem {
    margin-top: 25px;
  }
  .regionLineDescItem:first-of-type {
    margin-top: 0;
  }
}
.descTitle {
  margin-top: 20px;
  color: #555;
  font-size: 16px;
  span {
  }
}
.descNum {
  display: flex;
  align-items: baseline;
  color: #1b78ff;
  font-size: 26px;
  font-weight: bold;
  margin-top: 22px;
  margin-bottom: 22px;
  font-family: D-DIN-PRO-600-SemiBold;
}

.rmb {
  font-size: 18px;
}
.rate {
  margin-left: 20px;
}
.h100 {
  // height: 25vw;
  // width: 30%;
  // width: 30%;
  min-width: 250px;
  min-height: 220px;
}
// ::v-deep .el-date-editor {
//   background: #fafcfe;
//   border-radius: 4px;
//   border: 1px solid #e4edf8;
// }
// ::v-deep .el-form-item:last-of-type {
//   margin-bottom: 0px;
// }
// ::v-deep .el-form-item__label {
//   font-size: 14px;
//   font-family: PingFangSC-Regular, PingFang SC;
//   font-weight: 400;
//   color: #555555;
//   line-height: 22px;
// }
// ::v-deep .el-form-item {
//   margin-bottom: 6px;
// }
// ::v-deep .el-form-item__label-wrap {
//   margin-left: 0px !important;
// }
// .search-container {
//   display: flex;
//   align-items: center;
// }
</style>
